<template>
    <div class="table">
        <el-tree-select v-model="bindValue" :selectParams="selectParams"
            :treeParams="treeParams" :data="list"
            @searchFun="searchFun"  ref="treeSelect"/>
    </div>
</template>
<script lang="ts">
import { Component,Emit, Prop, Vue, Ref } from 'vue-property-decorator';

@Component
export default class TreeSelect extends Vue{
    list =[];
    @Ref("treeSelect") treeSelect!:any;
    @Prop() private api!: any;
    @Prop() private query: any;//查询参数
    @Prop() bindValue=0;
    @Prop() placeholder!:any;
    selectParams:any = {
      clearable: true,
      placeholder: this.placeholder || '请选择'
    };
    treeParams:any = {
      clickParent: true,
      filterable: true,
      accordion: true,
   
      props: {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
        value: 'id'
      }
    };

    refreshData(api: any) {
        api(this.handleParams()).then((res: any) => {
            this.list = res.data;
            }).catch((e) => {
            console.error(e);
        });
    }
    handleParams() {
        const options = Object.assign({}, this.query);
        return options;
    }
    @Emit("selectedValue")
    selectedValue(val){
        return val;
    }

    searchFun(value: any): void {
        this.treeSelect.filterFun(value);
    }
    mounted(){
        this.refreshData(this.api);
    }
}
</script>